@model EditRoleViewModel
@using OrchardCore.Roles.ViewModels;

<h1>@RenderTitleSegments(T["Edit Role {0}", Model.Name])</h1>

<form autocomplete="off">

    <div class="row">
        <div class="form-group col-xl-4 col-sm-6">
            <div class="input-group input-group-sm filter-options">
                <input id="search-box" class="form-control" placeholder="@T["Search"]" type="search" autofocus />
            </div>
        </div>
    </div>
</form>

<form asp-action="Edit" method="post">
    <h5>@T["Edit Role Detail"]</h5>
    <div class="form-group" asp-validation-class-for="RoleDescription">
        <label asp-for="RoleDescription">@T["Role description"]</label>
        <input asp-for="RoleDescription" class="form-control" />
    </div>
    <hr>

    <h5>@T["Role permissions"]</h5>

    <div class="properties ml-2">
        @T["Allow"] <span class="hint">— @T["Permission is granted explicitly."]</span>
    </div>
    <div class="properties ml-2">
        @T["Effective"] <span class="hint">— @T["Permission is implied by a higher level permission, or explicitly granted."]</span>
    </div>
    <hr>

    @foreach (var category in Model.RoleCategoryPermissions.Keys)
    {
        <fieldset class="permissions-list">
            <legend>@category</legend>
            <table class="table">
                <thead>
                    <tr>
                        <th class="col-10">@T["Permission"]</th>
                        <th class="col-1">@T["Allow"]</th>
                        <th class="col-1">@T["Effective"]</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var permission in Model.RoleCategoryPermissions[category])
                    {
                        <tr data-text="@permission.Description">
                            <td class="col-10">
                                @permission.Description
                            @if (permission.IsSecurityCritical)
                            {
                                <div class="float-right">
                                    <span class="badge badge-danger" data-toggle="tooltip" data-html="true" title="@T["This permission could allow a user to elevate their other permissions. Grant it with extreme consideration."]">@T["Security Critical"]</span>
                                </div>
                            }
                        </td>
                        <td class="col-1">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="Checkbox.@permission.Name" name="Checkbox.@permission.Name" checked="@(Model.Role.RoleClaims.Any(x => x.ClaimValue == permission.Name))" value="true">
                                <label class="custom-control-label" for="Checkbox.@permission.Name"></label>
                            </div>
                        </td>
                        <td class="col-1">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" disabled="disabled" id="Effective.@permission.Name" name="Effective.@permission.Name" checked="@(Model.EffectivePermissions.Contains(permission.Name))">
                                <label class="custom-control-label" for="Effective.@permission.Name"></label>
                            </div>
                        </td>
                    </tr>
                }
                </tbody>
            </table>
        </fieldset>
    }

    <div class="form-group">
        <button class="btn btn-primary" type="submit">@T["Save"]</button>
        <a class="btn btn-secondary" asp-route-action="Index">@T["Cancel"]</a>
    </div>
</form>

<script at="Foot" type="text/javascript">
    $(function () {
        var searchBox = $('#search-box');
        $('[data-toggle="tooltip"]').tooltip();
        // On each keypress filter the list of roles
        searchBox.keyup(function (e) {
            var search = $(this).val().toLowerCase();

            // On ESC, clear the search box and display all roles
            if (e.keyCode == 27 || search == '') {
                searchBox.val('');
                $('.permissions-list').toggle(true);
                $('.permissions-list > table > tbody > tr').toggle(true);
            }
            else {
                $('.permissions-list > table > tbody > tr').each(function () {
                    var text = $(this).data('text').toLowerCase();
                    var found = text.indexOf(search) > -1;
                    $(this).toggle(found);

                    if (found) {
                        $(this).parents('.permissions-list').toggle(true);
                    }
                });

                // Hide any section without visible permission
                $('.permissions-list').each(function () {
                    var list = $(this);
                    var hasVisiblePermissions = list.find('table > tbody > tr:visible').length > 0;
                    list.toggle(hasVisiblePermissions);
                });
            }
        });
    })
</script>
